<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
      <el-row :gutter="10" class="queryform">
        <el-col :span="12">
        <el-form-item label="日期单位" prop="dateUnit">
          <el-select v-model="queryParams.dateUnit" placeholder="请选择查询的日期单位" style="width: 60%" clearable>
            <el-option label="日" value="0" />
            <el-option label="月" value="1" />
            <el-option label="年" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    <el-col :span="12" v-if="queryParams.dateUnit=='0'">
      <el-form-item label="日期" prop="startDate" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-col>
    
    <el-col :span="12" v-if="queryParams.dateUnit=='1'">
      <el-form-item label="月份" prop="month" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.month"
          type="month"
          value-format="yyyy-MM"
          placeholder="请选择月份">
        </el-date-picker>
      </el-form-item>
    </el-col>

    <el-col :span="12" v-if="queryParams.dateUnit=='2'">
      <el-form-item label="年份" prop="date" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.year"
          type="year"
          placeholder="请选择年份">
        </el-date-picker>
      </el-form-item>
    </el-col>

    <el-col :span="24">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-col>
    </el-row>
    </el-form>



      <el-table ref="table" v-loading="loading" :data="data"  border stripe>
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column prop="totalCount" label="总数"/>
      <el-table-column prop="averageCount" label="平均值"/>
      <el-table-column prop="varianceCount" label="方差"/>
      <el-table-column prop="sdCount" label="标准差"/>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { listSeaStatistics } from "@/api/statistics/seaStatistics";

export default {
  name: 'seaStatistics',
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      queryParams : {
        pageNum: 1,
        pageSize: 10,
        dateUnit:'2',
        startDate: null,
        endDate: null,
        month: null,
        year: "2023",
      },
      loading: true,
      data: [],
      statisticsParames:{},
      tableHeight: '',
      // 总条数
      total: 0,
      // 重置参数
      resutParams:{
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading=false;
      if(this.queryParams.dateUnit === "0"){
        this.queryParams.month=null;
        this.queryParams.year=null;
      }else if(this.queryParams.dateUnit === "1"){
        this.queryParams.startDate=null;
        this.queryParams.year=null;
        console.log("this.queryParams.year",this.queryParams.year);
      }else if(this.queryParams.dateUnit === "2"){
        this.queryParams.startDate=null;
        this.queryParams.month=null;
      }
      // 设置 endDate 为 startDate 的日期但时间为 23:59:59
      if(this.queryParams.startDate){
        const startDate = new Date(this.queryParams.startDate);
        startDate.setHours(23, 59, 59, 999);
        this.queryParams.endDate = startDate.toISOString().split('T')[0] + ' 23:59:59';    
      }
      console.log("this.queryParams",this.queryParams);
      listSeaStatistics(this.queryParams).then(response => {
        this.data=response.rows;
      });

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams=this.resutParams;
      this.resetForm("queryForm");
    },
  }
}
</script>
